<template>
	<view class="content">
		<view class="top-bar">
			<view class="top-bar-left" @tap="back()">
				<image src="../../static/images/common/back.png" class="back-img"></image>
			</view>
			<view class="top-bar-right">
				<view class="more-img">
					<image src="../../static/images/userInfo/more@2x.png"></image>
				</view>
			</view>
		</view>
		<view class="bg">
			<view class="bg-bai" :animation="animationData5">

			</view>
			<image :src="user.profilePhoto" class="bg-img" mode="aspectFill"></image>
		</view>
		<view class="main">
			<view class="user-head">
				<view class="sex" :style="{background:sexcolor}" :animation="animationData4">
					<image src="../../static/images/userInfo/nv.png" v-if="user.gender == 1"></image>
					<image src="../../static/images/userInfo/nan.png" v-else-if="user.gender == 0"></image>
					<image src="../../static/images/userhome/asexual.png" v-else></image>
				</view>
				<image :src="user.profilePhoto" :animation="animationData3" mode="aspectFill" class="user-head-img">
				</image>
			</view>
			<view class="user-imf">
				<view class="name">
					{{user.nickname}}
				</view>
				<view class="nick">
					账号：{{user.username}}
				</view>
				<view class="intr">
					{{user.intr}}
				</view>
			</view>
		</view>
		<view class="bottom-bar">
			<view class="bottom-btn btn1" v-if="isAdd == true" @tap="toChat(user.username)">
				发送消息
			</view>
			<view class="bottom-btn btn1" v-else @tap="addFriendAnimat(user.username)">
				加为好友
			</view>
		</view>
		<view class="add-misg" :style="{height:addHeight+'px',bottom:-+addHeight+'px'}" :animation="animationData">
			<view class="name">
				{{user.name}}
			</view>
			<textarea v-model="message" maxlength="120" class="add-main"></textarea>
		</view>
		<view class="add-bt bottom-bar" :animation="animationData2">
			<view class="cancle btn1" @tap="addFriendAnimat()">取消</view>
			<view class="send btn1" @tap="sendAddFriendRequest()">发送</view>
		</view>
	</view>
</template>

<script>
	import request from '../../api/request.js';
	export default {
		data() {
			return {
				sexcolor: "#FF5D5B",
				user: {
					nickname: '鱼香肉丝没有鱼',
					profilePhoto: "https://img1.baidu.com/it/u=3158126749,4216279103&fm=26&fmt=auto",
					username: "luowenyang",
					intr: "成长就是哪怕你难过的快要死掉了 但你第二天还是照常的去忙这忙那 或许 没人知道你发生了什么 最漆黑的那条路终究要自己独自走完 总有一天你会明白 你的委屈要自己消化 真正理解你的没有几个 人阿 大多只会站在他们的立场上偷看你的笑话 你能做的就是把秘密藏起来 然后一步一步变得越来越强大"
				},
				myname: "鱼香肉丝没有鱼",
				addHeight: '',
				animationData: {}, //动画,
				animationData2: {}, //动画,
				animationData3: {},
				animationData4: {},
				animationData5: {},
				isAdd: false,
				message: ""
				// message:user.username + " 请求加为好友~"
			}
		},
		onLoad(option) {
			this.message = this.$store.getters.getUser.nickname + " 请求加为好友！"
			this.getInfo(option.username)
			if (option.isFriend == 'yes') {
				this.isAdd = true
			} else {
				this.isAdd = false
			}

		},
		methods: {
			back() {
				uni.navigateBack({
					delta: 1
				})
			},
			toChat(friend) {
				// friend.tip = 0;
				uni.navigateTo({
					url: "../chartroom/chartroom?from=" + uni.getStorageSync("userInfo").username + "&to=" +
						friend + "&nickname=" + this.user.nickname + "&chatType=private",
				})
			},
			getElementStyle() {
				const query = uni.createSelectorQuery().in(this);
				query.select('.bg').boundingClientRect(data => {
					console.log("得到布局位置信息" + JSON.stringify(data));
					console.log("节点离页面顶部的距离为" + data.top);
					this.addHeight = data.height - 186
				}).exec();
			},
			//添加好友动画
			addFriendAnimat() {
				this.isAdd = !this.isAdd;
				var animation = uni.createAnimation({
					duration: 300,
					timingFunction: 'ease',
				})
				var animation2 = uni.createAnimation({
					duration: 300,
					timingFunction: 'ease',
				})
				var animation3 = uni.createAnimation({
					duration: 300,
					timingFunction: 'ease',
				})
				var animation4 = uni.createAnimation({
					duration: 300,
					timingFunction: 'ease',
				})
				var animation5 = uni.createAnimation({
					duration: 300,
					timingFunction: 'ease',
				})
				if (this.isAdd) {
					animation.bottom(0).step()
					animation2.bottom(0).step()
					animation3.width(120).height(120).step()
					animation4.opacity(0).step()
					animation5.backgroundColor('rgba(255,228,49,0.60)').step()
				} else {
					animation.bottom(-this.addHeight).step()
					animation2.bottom(-100).step()
					animation3.width().height().step()
					animation4.opacity(1).step()
					animation5.backgroundColor('rgba(255,228,49,0)').step()
				}

				this.animationData = animation.export()
				this.animationData2 = animation2.export()
				this.animationData3 = animation3.export()
				this.animationData4 = animation4.export()
				this.animationData5 = animation5.export()
			},
			// 获取用户信息
			async getInfo(username) {
				//console.log("xiaox",this.message)
				let result = await request({
					url: '/user/info/' + username,
				});
				this.user = result[1].data.data;
				console.log(result[1].data)
				console.log(this.user.gender)
				if (this.user.gender == 0) {
					this.sexcolor = '#1768E3'
				} else if (this.user.gender == 2) {
					this.sexcolor = '#FFE500'
				}
			},
			async sendAddFriendRequest() {
				let res = await request({
					url: '/friend/request/add',
					data: {
						userName: uni.getStorageSync("userInfo").username,
						friendName: this.user.username,
						message: this.message,
						sendTime: new Date()
						//time:new Date()
					},
					method: 'POST'
				});
				res = res[1].data;
				let newMessage = {
					chatType: '好友请求',
					fromUser: uni.getStorageSync("userInfo").username,
					id: "0",
					messageContent: this.message,
					messageType: 1, //区分是  0  聊天信息  还是   1  好友请求
					profilePhoto: null,
					sendTime: new Date(),
					toUser: this.user.username
				}
				var Msg = {
					"message": newMessage,
					"username": uni.getStorageSync("userInfo").username,
					"to": this.user.username
				};
				console.log("发送的信息为：", Msg)
				this.$store.dispatch('webSocketSend', Msg);
				uni.showToast({
					title: "发送请求成功",
					duration: 1000
				});
				setTimeout(() => {
					this.back()
				}, 1100)
			},


		},
		onReady() {
			this.getElementStyle();
		}
	}
</script>

<style lang="scss">
	@import "../../commons/css/mycss.scss";

	.top-bar {
		position: fixed;
		z-index: 1001;
		top: 0;
		left: 0;
		width: 100%;
		height: 44px;

		// padding-top: var(--status-bar-height);
		// background: $uni-bg-color;
		// border-bottom: 1px solid $uni-border-color;
		.top-bar-left {
			float: left;
			padding-left: 32rpx;
			// background-color: #eee;
			width: 88rpx;
			height: 88rpx;

			.back-img {
				padding-top: 10rpx;
				margin-top: 11rpx;
				width: 46rpx;
				height: 46rpx;
			}
		}
	}

	.bg {
		position: fixed;
		z-index: -2;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;

		.bg-bai {
			width: 100%;
			height: 100%;
			//background-color: #eee;
		}

		.bg-img {
			opacity: 0.4;
			position: absolute;
			z-index: -1;
			left: -10rpx;
			top: -10rpx;
			width: 110%;
			height: 110%;
			filter: blur(16px);
		}
	}

	.main {
		padding-top: 240rpx;

		.user-head {
			text-align: center;
			margin: 0 auto;
			width: 412rpx;
			height: 412rpx;
			position: relative;

			.sex {
				z-index: 11;
				position: absolute;
				bottom: 12rpx;
				right: 12rpx;
				width: 64rpx;
				height: 64rpx;
				// background: #FF5D5B;
				border-radius: 36rpx;

				image {
					padding: 16rpx;
					width: 32rpx;
					height: 32rpx;
				}
			}

			.user-head-img {
				z-index: 10;
				top: 0;
				width: 400rpx;
				height: 400rpx;
				border: 6rpx solid #FFFFFF;
				border-radius: 48rpx;
				box-shadow: 0px 36rpx 40rpx 0px rgba(39, 40, 50, 0.1);
			}
		}

		.user-imf {
			// font-family: PingFangSC-Medium;
			padding-top: 42rpx;

			.name {
				text-align: center;
				font-size: 52rpx;
				color: $uni-text-color;
				line-height: 74rpx;
				font-family: PingFangSC-Regular;
			}

			.nick {
				text-align: center;
				font-size: $uni-font-size-base;
				line-height: 40rpx;
				color: #2B2C36;
				font-family: PingFangSC-Regular;
			}

			.intr {
				padding: 20rpx 100rpx;
				font-family: PingFangSC-Light;
				font-size: $uni-font-size-base;
				color: #272832;
				letter-spacing: -0.48px;
				line-height: 48rpx;
				font-weight: 300;
			}
		}
	}

	.add-misg {
		position: fixed;
		width: 100%;
		padding: 0 56rpx;
		box-sizing: border-box;
		// height: 1252rpx;
		background: #FFFFFF;
		border-radius: 40rpx 40rpx 0px 0px;

		.name {
			//这里做了修改 原来是 168
			padding: 168rpx 0 40rpx;
			font-family: PingFangSC-Regular;
			font-size: 52rpx;
			color: #272832;
			line-height: 74rpx;
			font-weight: 400;
		}

		.add-main {
			padding: 18rpx 22rpx;
			box-sizing: border-box;
			width: 100%;
			height: 420rpx;
			background: #F5F6F7;
			font-size: $uni-font-size-lg;
			border-radius: 20rpx;
			font-weight: 400;
			line-height: 88rpx;
			color: $uni-text-color;

		}
	}

	.add-bt {
		z-index: 100;
		bottom: -200rpx;
		display: flex;

		//background-color: #eee;
		.send {
			margin: 0 $uni-spacing-col-base;
			flex: auto;
			background: #FFE431;
			font-family: PingFangSC-Regular;
		}

		.cancle {
			// flex: auto;
			width: 172rpx;
			background: $uni-bg-color-hover;
			font-family: PingFangSC-Regular;
			margin-left: $uni-spacing-col-base;
		}
	}

	.bottom-btn {
		background-color: $uni-color-primary;
		margin: 0 $uni-spacing-col-base;
	}
</style>
